<template>
<div class="main-content">
	<div class="screen-frame clearfix">
		<div class="col-md-6 col-lg-5">
			<div class="form-horizontal">
				<div class="form-group">
					<label for="" class="col-md-3 col-sm-2 control-label">楼盘：</label>
					<div class="col-md-6 col-sm-10">
						<el-select class="" v-model="params.premisesId" clearable filterable placeholder="请选择" style="width:100%">
							<el-option
							v-for="item in premisesList"
							:key="item.id"
							:label="item.name"
							:value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>
			<div class="form-horizontal">
				<div class="form-group">
					<label for="" class="col-md-3 col-sm-2 control-label">合作机构：</label>
					<div class="col-md-6 col-sm-10">
                        <el-select class="" v-model="params.agentOrgId" clearable filterable placeholder="请选择" style="width:100%">
							<el-option
							v-for="item in companyList"
							:key="item.agentCompany"
							:label="item.agentCompanyName"
							:value="item.agentCompany">
							</el-option>
						</el-select>
					</div>
				</div>
			</div>

		</div>
		<div class="col-md-6 col-lg-6" >
			<div class="form-horizontal">
				<div class="form-group">
					<label class="col-md-3 col-sm-2 control-label">合作机构佣金是否结清：</label>
					<div class="col-md-5 col-sm-10" >
						<select class="form-control" v-model="params.agentCommissionStatus">
							<option value="">全部</option>
                            <option value="1">是</option>
                            <option value="0,2">否</option>
						</select>
					</div>
				</div>
			</div>
            <div class="form-horizontal">
				<div class="form-group">
					<label class="col-md-3 col-sm-2 control-label">开发商佣金是否结清：</label>
					<div class="col-md-5 col-sm-10" >
						<select class="form-control" v-model="params.devCommissionStatus">
							<option value="">全部</option>
                            <option value="1">是</option>
                            <option value="0,2">否</option>
						</select>
					</div>
				</div>
			</div>
			<div class="form-horizontal">
				<div class="form-group">
					<label for="" class="col-md-3 col-sm-2 control-label"></label>
					<div class="col-md-8 col-sm-10">
						<button class="btn btn-theme" @click="getCommissionList" style="color: white;">查询</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="table-responsive report-table">
		<table class="table table-striped table-bordered min-width-1218" style="min-width: 1230px;max-width: 2000px;width: 100%">
			<thead>
				<tr>
					<td width="5%">序号</td>
					<td width="13%">楼盘名称</td>
					<td width="13%">合作机构</td>
					<td width="5%">成交房间套数</td>
					<td width="7%">佣金是否结清<p>（合作机构）</p></td>
					<td width="7%">佣金是否结清<p>（开发商）</p></td>
					<td width="7%">总佣金<p>（合作机构）</p></td>
					<td width="7%">已结佣金<p>（合作机构）</p></td>
					<td width="7%">待结佣金<p>（合作机构）</p></td>
					<td width="7%">总佣金<p>（开发商）</p></td>
					<td width="7%">已结佣金<p>（开发商）</p></td>
					<td width="7%">待结佣金<p>（开发商）</p></td>
                    <td width="7%">总佣金<p>（本部机构）</p></td>
					<td width="7%">已结佣金<p>（本部机构）</p></td>
					<td width="7%">待结佣金<p>（本部机构）</p></td>
					<td width="5%">操作</td>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(row,index) in commissionList">
					<td>{{(params.pageNo-1)*params.pageSize+index+1}}</td>
					<td>{{row.premisesName}}</td>
					<td>{{row.agentCompanyName}}</td>
					<td>{{row.dealNum}}</td>
					<td>{{row.agentIsSettle == 0 ? '是':'否'}}</td>
                    <td>{{row.devIsSettle == 0 ? '是':'否'}}</td>
					<td>{{row.agentCommission}}</td>
					<td>{{row.agentReceivedCommission}}</td>
					<td>{{row.agentPendingCommission}}</td>
					<td>{{row.devCommission}}</td>
					<td>{{row.devReceivedCommission}}</td>
					<td>{{row.devPendingCommission}}</td>
                    <td>{{row.orgCommission}}</td>
					<td>{{row.orgReceivedCommission}}</td>
					<td>{{row.orgPendingCommission}}</td>
					<td style="vertical-align: middle;">
						<button class="btn btn-theme" @click="showDetail(row.agentCompanyId,row.premisesId)" v-res="{code:'menu_0006_0002_0002'}">查看</button>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
	<div id="laypage_org_commission"></div>
	<SettlementModal v-bind:settlementCommission="settlementCommission" v-on:initCommissionList="initCommissionList"></SettlementModal>
</div>
</template>

<script>
	import SettlementModal from './settlementCommission.vue'
	export default {
		data(){
			return {
				params:{
					pageSize:10,
					pageNo:1,
                    agentCommissionStatus:'',
                    devCommissionStatus:'',
                    premisesId:'',
                    agentOrgId:''
				},
                premisesList:[],
                commissionStateList:[],
				companyList:[],
                commissionList:[],
                settlementCommission:{
                	commissionId:'',
                	pendingCommission:''
                }
			}
		},
		components: {
            SettlementModal
		},
		mounted: function() {
			this.getPremiseList();
            this.getCommissionStatusList();
            this.getCompanyList();
            this.getCommissionList();
		},
		methods: {
            //楼盘
            getPremiseList:function(){
                var _self = this;
                var url =  _self.utilHelper.apiUrl+"/api/getPremisesForRule";
                var body = {};
                body.params = {};
                _self.$http.post(url, body).then((response) => {
                    if(response.body.result == '1') {
                        this.premisesList = response.body.resData.list;
                    }
                })
            },
			//佣金状态
			getCommissionStatusList:function(){
                var _self = this;
                var url =  _self.utilHelper.apiUrl+"/common/getEnum/CommissionStatusEnum";
                _self.$http.get(url).then((response) => {
                    this.commissionStateList =  response.body.data;
                })
            },
			//获取合作机构
			getCompanyList:function(){
			    var _self = this;
			    var body = {};
			    body.params = {};
                var url =  _self.utilHelper.apiUrl+"/api/getAgentOrgByDevOrg";
                _self.$http.post(url,body).then((response) => {
                    if(response.body.result == '1'){
                        this.companyList =  response.body.resData.agentOrgList;
                    }else{
                        layer.msg("查询条件初始化失败");
                    }
                })
			},
			//获取机构佣金列表
			getCommissionList:function () {
				var _self = this;
				var body = {};
				body.params = this.params;
				var url = _self.utilHelper.apiUrl+"/api/cp/getAgentCommissionSummaryPage";
                _self.$http.post(url,body).then((response) => {
                    var body = response.body;
					if(body.result == '1'){
                        _self.commissionList = body.resData.page.rows;
                        var current = body.resData.page.pageNumber;
                        var total = body.resData.page.total;
                        var totalPages = body.resData.page.totalPages;
                        if(totalPages >=0) {
                        	layui.laypage.render({
								elem: $('#laypage_org_commission'), //容器。值支持id名、原生dom对象，jquery对象,
								limit:_self.params.pageSize,
								curr:current,
								count:total,
								theme: '#f87242;', //皮肤
								first: '首页', //若不显示，设置false即可
								last: '尾页', //若不显示，设置false即可
								prev: '上一页', //若不显示，设置false即可
								next: '下一页', //若不显示，设置false即可
								layout:['prev', 'page', 'next','skip','count'],
	                            jump: function(obj,first){
	                                if(!first){
	                                    _self.params.pageNo=obj.curr;
	                                    _self.getCommissionList();
	                                }
	                            }
                        	});
                     	}
					}
                })

            },
			//结佣
            showSettlement:function (id,pendingCommission) {
			    var _self = this;
			    _self.settlementCommission.commissionId = id;
			    _self.settlementCommission.pendingCommission = pendingCommission;
				$('#settlementModal').modal('show');
            },
            showDetail:function(agentOrgId, premisesId){
                this.$router.push(
                    {
                        name:"orgCommissionDetailNew",
                        params:{agentOrgId:agentOrgId, premisesId:premisesId}
                    }
                );
			},
			initCommissionList:function(){
				this.getCommissionList();
			}
		}
	}
</script>
<style>
.main-content .report-table{
    overflow-x: auto;
}
.main-content .report-table .table td{
    min-width: 100px;
}
</style>